<template>
  <div class="index_container">
    <div class="title">{{ sysName }}</div>
    <div
      class="menu"
      v-for="(item, index) in menu"
      :key="index + item"
      @click="nav(item)"
    >
      <img :src="item.img" alt="" style="width: 100%; height: 100%" />
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      sysName: process.env.VUE_APP_TITLE,
      menu: [
        {
          name: "原始数据存储与管理平台",
          img: require("../assets/menu1.png"),
          path: "/originalStorage",
        },
        {
          name: "数据清洗与元数据提取网关",
          // name: "关联判证",
          img: require("../assets/menu2.png"),
          path: "/data_cleaning",
        },
        {
          name: "目标水声特征等数据库",
          img: require("../assets/menu3.png"),
          path: "/targetWater",
        },
        {
          name: "水声数据分析软件工具集",
          img: require("../assets/menu4.png"),
          path: "/analysisTool/algorithm",
        },
      ],
    };
  },
  methods: {
    nav(item) {
      this.$router.push(item.path);
    },
  },
};
</script>

<style scoped lang="scss">
.index_container {
  width: 100%;
  height: 100%;
  background-image: url("../assets/bg_line.png"), url("../assets/bg.png");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-attachment: local, fixed;
  background-size: 100% 100%, cover;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;

  .title {
    position: absolute;
    width: 100%;
    top: 0;
    text-align: center;
    height: 7vh;
    line-height: 7vh;
    font-family: YouSheBiaoTiHei;
    font-weight: 400;
    letter-spacing: 0.6vw;
    font-size: 34px;
    color: #ffffff;

    @media (min-width: 1280px) and (max-width: 1440px) {
      letter-spacing: 0.5vw;
    }

    @media screen and (max-width: 1280px) {
      letter-spacing: 4px;
    }
  }

  .menu {
    width: 388px;
    cursor: pointer;
    aspect-ratio: 4.85 / 6.875;
  }
}
</style>
